<template>
	<!-- 正常购物车页面 -->
	<view class="cartContainer" v-if="cart.length !== 0">
		<!-- 标题区 -->
		<view class="titleContainer">
			<!-- 左侧标题与收货地址 -->
			<view class="titleLeft">
				<view class="mainTitle">
					购物车<text v-if="cart.length !== 0">({{ cart.length }})</text>
				</view>
				<!-- 收货地址 -->
				<view class="address"> <my-address></my-address> </view>
			</view>
			<!-- 右侧管理商品按钮 -->
			<view class="titleRight" @click="management"> <text>管理</text> </view>
		</view>

		<!-- 商品列表区 -->
		<view class="listContainer">
			<uni-swipe-action>
				<view v-for="item in cart" :key="item.goods_id" class="listItem">
					<uni-swipe-action-item :right-options="options" @click="optionsClick(item, $event)">
						<!-- 传入循环项item渲染该组件结构 -->
						<my-goods :goodsItem="item" :smallSize="true">
							<!-- 具名插槽select，商品勾选框-->
							<template #select>
								<radio :checked="item.goods_state" color="#c00000" @click="radioChange(item)" />
							</template>
							<!-- 具名插槽numBox，商品数量输入框 -->
							<template #numBox>
								<uni-number-box min="1" :value="item.goods_count" @change="numBoxChange(item, $event)"></uni-number-box>
							</template>
						</my-goods>
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>
		</view>

		<!-- 结算区 -->
		<view class="settleContainer"> <my-settle></my-settle> </view>
	</view>

	<!-- 空购物车页面 -->
	<view class="emptyCart" v-else>
		<!-- 购物车图标 -->
		<uni-icons type="cart" size="110" color="#C00000"></uni-icons>
		<!-- 购物车提示 -->
		<view class="shopTips">"没关系，反正我也不空虚，你不用管我"</view>
		<!-- 登录按钮 -->
		<button class="shopBtn" type="primary" @click="goToHome">马上填补空虚</button>
	</view>
</template>

<script>
// 导入设置购物车tab页的角标混入模块
import badgeMix from '@/mixins/tabbar-badge.js'
import { mapState, mapMutations } from 'vuex'
export default {
	mixins: [badgeMix],
	data() {
		return {
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#c00000'
					}
				}
			]
		}
	},

	computed: {
		// 将购物车的Vuex模块中的cart映射为计算属性
		...mapState('m_cart', ['cart'])
	},
	methods: {
		...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),

		// 监听管理按钮点击事件
		management() {
			uni.$showMsg('此功能暂未开发！')
		},
		// 监听商品项勾选框的点击事件
		radioChange(goodsitem) {
			// 调用修改传入ID对应的商品项勾选状态的mutation
			this.updateGoodsState({ id: goodsitem.goods_id })
		},

		// 监听商品项数字输入框的change事件
		numBoxChange(goodsitem, value) {
			// 调用修改传入ID对应的商品项数量的mutation
			this.updateGoodsCount({ id: goodsitem.goods_id, newNum: value })
		},

		// 定义左滑显示的选项的点击事件
		optionsClick(goodsitem, e) {
			// 判断是否为删除选项
			if (e.content.text === '删除') {
				uni.showModal({
					content: '是否确定删除该商品？',
					success: res => {
						// 用户确定删除
						if (res.confirm) {
							// 调用修改传入ID对应的商品项的mutation
							this.removeGoodsById({ id: goodsitem.goods_id })
						}
					}
				})
			}
		},

		// 定义空购物车的按钮点击事件，导航至首页
		goToHome() {
			uni.switchTab({
				url: '/pages/home/home'
			})
		}
	}
}
</script>

<style lang="scss">
page {
	height: 100%; // 配合空购物车页面的100%高度
}
// 标题区
.titleContainer {
	position: sticky;
	top: 0;
	padding: 0 10px;
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	border-bottom: 1px solid #efefef;
	z-index: 999;
	// 标题左侧
	.titleLeft {
		display: flex;
		align-items: baseline;
		.mainTitle {
			font-size: 17px;
			font-weight: 700;
		}
		.address {
			margin-left: 10px;
			max-width: 150px;
		}
	}
}
// 商品列表区
.listContainer {
	.listItem {
		margin: 10px 10px 0;
		border-radius: 10px;
		background-color: #fff;
		radio {
			padding: 0 5px;
		}
	}
}
// 结算区
.settleContainer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
.cartContainer {
	padding-bottom: 50px;
}

// 空白页
.emptyCart {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f8f8f8;
	// 购物车提示
	.shopTips {
		font-size: 14px;
		color: gray;
	}
	// 按钮
	.shopBtn {
		margin: 15px 0;
		width: 60%;
		border-radius: 100px;
		background-color: #c00000;
	}
}
</style>
